<template>
  <div class="category-list">
    <div class="header">
      <h1>分类管理</h1>
      <a-button type="primary" @click="showModal">
        <plus-outlined /> 新增分类
      </a-button>
    </div>
    
    <a-table
      :columns="columns"
      :data-source="categoryStore.categoryList"
      :loading="loading"
      row-key="id"
      :pagination="{
        total: categoryStore.total,
        current: current,
        pageSize: pageSize,
        onChange: handlePageChange
      }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
            <a-popconfirm
              title="确定要删除这个分类吗?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="handleDelete(record.id)"
            >
              <a-button danger size="small">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </a-table>
    
    <!-- 新增/编辑分类的模态框 -->
    <a-modal
      :visible="modalVisible"
      :title="isEdit ? '编辑分类' : '新增分类'"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :model="categoryForm" layout="vertical">
        <a-form-item label="分类名称" name="name" :rules="[{ required: true, message: '请输入分类名称' }]">
          <a-input v-model:value="categoryForm.name" placeholder="请输入分类名称" />
        </a-form-item>
        <a-form-item label="分类描述" name="description">
          <a-textarea v-model:value="categoryForm.description" placeholder="请输入分类描述" :rows="4" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { useCategoryStore } from '@/stores/category';
import { addCategory, deleteCategory } from '@/api/category';

const categoryStore = useCategoryStore();
const loading = ref(false);
const modalVisible = ref(false);
const isEdit = ref(false);
const current = ref(1);
const pageSize = ref(10);

const categoryForm = ref({
  id: null as number | null,
  name: '',
  description: ''
});

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 80
  },
  {
    title: '分类名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
    ellipsis: true
  },
  {
    title: '操作',
    key: 'action',
    width: 150
  }
];

onMounted(() => {
  fetchCategories();
});

const fetchCategories = async () => {
  loading.value = true;
  try {
    await categoryStore.getCategoryList(current.value, pageSize.value);
  } finally {
    loading.value = false;
  }
};
const handlePageChange = (page: number) => {
  current.value = page;
  fetchCategories();
};
const showModal = () => {
  isEdit.value = false;
  categoryForm.value = {
    id: null,
    name: '',
    description: ''
  };
  modalVisible.value = true;
};

const handleEdit = (record: any) => {
  isEdit.value = true;
  categoryForm.value = {
    id: record.id,
    name: record.name,
    description: record.description
  };
  modalVisible.value = true;
};

const handleOk = async () => {
  loading.value = true;
  try {
    if (isEdit.value) {
      // 编辑分类
      await categoryStore.updateCategory(categoryForm.value);
      message.success('分类更新成功');
    } else {
      // 新增分类
      await categoryStore.addCategory(categoryForm.value);
      message.success('分类添加成功');
    }
    modalVisible.value = false;
    fetchCategories();
  } catch (error) {
    console.error('保存分类失败:', error);
    message.error('保存失败');
  } finally {
    loading.value = false;
  }
};

const handleCancel = () => {
  modalVisible.value = false;
};

const handleDelete = async (id: number) => {
  loading.value = true;
  try {
    await categoryStore.deleteCategory(id);
    message.success('分类删除成功');
    fetchCategories();
  } catch (error) {
    console.error('删除分类失败:', error);
    message.error('删除失败');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.category-list {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style> 